<template>
  <div class="app-layout">
    <Sidebar :isCollapsed="sidebarCollapsed" @toggle-sidebar="toggleSidebar" />
    
    <div class="main-container" :class="{ 'sidebar-collapsed': sidebarCollapsed, 'sidebar-expanded': !sidebarCollapsed }">
      <Header :title="pageTitle" :isSidebarCollapsed="sidebarCollapsed" @toggle-sidebar="toggleSidebar" />
      
      <main class="content-area">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import Header from '@/components/Header.vue';
import Sidebar from '@/components/Sidebar.vue';

const route = useRoute();
const sidebarCollapsed = ref(false);

// 页面标题
const pageTitle = computed(() => {
  const routeName = route.name as string;
  
  if (!routeName) return 'AI绘画工具';
  
  const titles: Record<string, string> = {
    'home': '首页',
    'text-to-image': '文生图',
    'img-to-img': '图生图',
    'template-showcase': '模板展示',
    'workflows': '工作流',
  };
  
  return titles[routeName] || 'AI绘画工具';
});

// 切换侧边栏
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value;
};

// 监听路由变化，在移动设备上自动收起侧边栏
watch(
  () => route.path,
  () => {
    if (window.innerWidth < 768) {
      sidebarCollapsed.value = true;
    }
  }
);
</script>

<style lang="scss" scoped>
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  transition: margin-left 0.3s ease;
  
  &.sidebar-expanded {
    @media (min-width: 768px) {
      margin-left: 16rem; /* 对应侧边栏宽度 w-64 (16rem) */
    }
  }
  
  &.sidebar-collapsed {
    @media (min-width: 768px) {
      margin-left: 4rem; /* 对应收缩侧边栏宽度 w-16 (4rem) */
    }
  }
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: var(--bg-color);
  transition: background-color 0.3s;
}

@media (max-width: 768px) {
  .app-layout {
    flex-direction: column;
  }
  
  .main-container {
    margin-left: 0 !important;
  }
}
</style> 